<template>
  <el-config-provider :locale="elLocale">
    <div id="app">
      <VFormDesigner ref="vfDesignerRef"
        :slot-field-list="slotFields"
        :busiConfig="busiConfig"
        :axiosConfig="axiosConfig"
        :slotsConfig="slotsConfig"
        :enumsConfig="enumsConfig">
      </VFormDesigner>
    </div>
  </el-config-provider>
</template>

<script>
import { EnumsDataPools } from '@/enums/enums-index';
import VFormDesigner from './components/form-designer/index.vue';
import VFormWidgetData from '@/mock/VFormWidgetData.json';
// import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
import zhCNLang from 'element-plus/dist/locale/zh-cn.mjs';
import enUSLang from 'element-plus/dist/locale/en.mjs';
import { userInfo } from './useInfo';
import XEUtils from 'xe-utils';

export default {
  name: 'App',
  components: {
    VFormDesigner,
  },
  data() {
    return {
      elLocaleMap: {
        'zh-CN': zhCNLang,
        'en-US': enUSLang,
      },

      //全局数据源变量
      globalDsv: {
        // testApiHost: 'http://www.test.com/api',
        // testPort: 8080,
      },

      fieldListApi: {
        URL: 'https://mock.apifox.cn/m1/2501980-0-default/form/getFormDataFiled',
      },
      slotFields: [
        { label: 'XmSzysTable', name: 'XmSzysTable', text: '收支预算表格' },
        { label: 'XmZjjgTable', name: 'XmZjjgTable', text: '资金监管表格' },
        { label: 'XmHbfxTable', name: 'XmHbfxTable', text: '还本付息表格' },
        { label: 'XmHbjhTable', name: 'XmHbjhTable', text: '还本计划表格' },
        { label: 'XmFilesTable', name: 'XmFilesTable', text: '项目附件表格' },
      ],
      enumsDataConfig: {
        dataPools: EnumsDataPools,
      },
      busiConfig: {
        hooks: {},
        XEUtils,
        userInfo: userInfo,
        dataHouse: {
          proId: 'DE68E93F8B674B31AD0B936676E37B60',
          billYear: '2023',
          buttonCode: 'add',
        },
      },
      axiosConfig: {
        token: '',
        baseUrl: '/api',
      },
      slotsConfig: {
        dataPools: [
          { label: 'XmSzysTable', name: 'XmSzysTable', text: '收支预算表格' },
          { label: 'XmZjjgTable', name: 'XmZjjgTable', text: '资金监管表格' },
          { label: 'XmHbfxTable', name: 'XmHbfxTable', text: '还本付息表格' },
          { label: 'XmHbjhTable', name: 'XmHbjhTable', text: '还本计划表格' },
          { label: 'XmFilesTable', name: 'XmFilesTable', text: '项目附件表格' },
        ],
      },
      enumsConfig: {
        dataPools: EnumsDataPools,
      },
    };
  },
  computed: {
    elLocale() {
      let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN';
      return this.elLocaleMap[curLocale];
    },
  },
  created() {
  },
  mounted() {
  // this.$refs.vfDesignerRef.setFormJson(VFormWidgetData)
  },
  methods: {
    doTest() {
      let fieldList = this.$refs.vfDesignerRef.getFieldWidgets(null, true);
      let slotFieldList = this.$refs.vfDesignerRef.getSlotFieldWidgets();
      // console.log('test', fieldList, JSON.parse(JSON.stringify(slotFieldList)));
    },
  },
};
</script>

<style lang="scss">
#app {
  height: 100%;
}
</style>
